<template>
    <el-card>
        <div slot="header">
            主播列表
            <el-button @click="$router.push('/anchor/create')" type="success">添加主播</el-button>
            <el-button @click="$router.push('/anchor/bulk-create')" type="primary">批量添加主播</el-button>
        </div>
        <el-form label-width="120px">
            <el-form-item label="平台">
                <div slot="label">平台
                    <el-button type="text" @click="unSelect('platforms')">反选</el-button>
                </div>
                <el-checkbox-group v-model="filter.platforms">
                    <el-checkbox v-for="p in platforms" :key="p.id" :label="p.id" :value="p.id">{{p.name}}</el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="主播级别">
                <div slot="label">主播级别
                    <el-button type="text" @click="unSelect('levels')">反选</el-button>
                </div>
                <el-checkbox-group v-model="filter.levels">
                    <el-checkbox v-for="l in levels" :key="l.id" :label="l.id" :value="l.id">{{l.name}}</el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="状态">
                <el-radio-group v-model="filter.state">
                    <el-radio :label="0" :value="0">正常</el-radio>
                    <el-radio :label="1" :value="1">已删除</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="搜索主播">
                <el-input v-model="filter.search" placeholder="主播名称 / 主播房间号"/>
            </el-form-item>
            <el-form-item label="搜索经纪人">
                <project_search_user v-model="filter.agents" :multiple="true" placeholder="用户名称 / 手机 / 邮箱"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="fetch">搜索</el-button>
            </el-form-item>
        </el-form>
        <el-table
                border
                :data="anchors"
                :stripe="true"
                :v-loading="loading"
                @row-click="open"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55"
                    v-if="$store.state.user.level.id <= 2"/>
            <el-table-column
                    label="平台"
                    prop="platform.name"
                    width="100">
                <template slot-scope="scope">
                    <span>{{platforms[scope.row.platform_id].name}}</span>
                </template>
            </el-table-column>
            <el-table-column label="名称" prop="name" width="200px"/>
            <el-table-column label="级别" prop="level" width="140px">
                <template slot-scope="scope">
                    {{levels[scope.row.level_id].name}}
                </template>
            </el-table-column>
            <el-table-column label="经纪人"
                             prop="agent.username" width="140px"/>
            <el-table-column label="直播间">
                <template slot-scope="scope">
                    <a :href="scope.row.url" target="_blank">网址</a>
                </template>
            </el-table-column>
        </el-table>
        <br>
        <el-button :disabled="selected.length === 0" @click="del"
                   v-if="$store.state.user.level.id <= 2 && filter.state === 0">删除
        </el-button>
        <el-button :disabled="selected.length === 0" @click="restore"
                   v-if="$store.state.user.level.id <= 2 && filter.state === 1" type="success">恢复
        </el-button>
        <el-pagination
                background
                layout="prev, pager, next"
                :page-size="$store.state.pageSize"
                :current-page.sync="page"
                @current-change="fetch"
                :total="total"
                class="inline-block">
        </el-pagination>
    </el-card>
</template>

<script>
    import Project_search_user from "../component/project_search_user";

    export default {
        components: {Project_search_user},
        data() {
            return {
                loading: true,
                total: 0,
                page: 1,
                anchors: [],
                levels: [],
                platforms: [],
                filter: {platforms: [], levels: [], search: '', state: 0, agents: []},
                selected: [],
            };
        },
        methods: {
            fetch() {
                this.loading = true;
                this.selected = [];
                const params = {page: this.page, state: this.filter.state};
                if (!_.isEmpty(this.filter.search))
                    params.search = this.filter.search;

                if (this.filter.platforms.length > 0)
                    params.platforms = this.filter.platforms.join(',');

                if (this.filter.levels.length > 0)
                    params.levels = this.filter.levels.join(',');

                if (this.filter.agents.length > 0)
                    params.agents = this.filter.agents.join(',');

                this.$http.get('/api/xiaohulu/anchors', {params}).then(res => {
                    const data = res.data;
                    this.anchors = data.list;
                    this.total = data.total;
                    this.loading = false;
                });
            },
            open(row, e, column) {
                if (column.type === 'selection' || column.label === '直播间网址') return;
                this.$router.push('/anchor/' + row.id);
            },
            handleSelectionChange(selected) {
                this.selected = selected.map(item => item.id);
            },
            del() {
                this.$http.delete('/api/xiaohulu/anchors', {params: {id: this.selected.join(',')}})
                    .then(res => {
                        this.fetch();
                        this.$message.success('成功删除');
                    })
                    .catch(err => {
                        this.$message.error(err.response.data);
                    });
            },
            restore() {
                this.$http.delete('/api/xiaohulu/anchors', {
                    params: {
                        restore: true,
                        id: this.selected.join(',')
                    },
                })
                    .then(res => {
                        this.$message.success('成功恢复 ' + this.selected.length + ' 个主播');
                        this.fetch();
                    })
                    .catch(err => {
                        this.$message.error(err.response.data);
                    });
            },
            unSelect(target) {
                let _target = this[target];
                let selected = _.filter(_target, platform => {
                    return this.filter[target].indexOf(platform.id) === -1;
                });
                this.filter[target] = selected.map(item => item.id);
            },
        },
        mounted() {
            this.$http.get('/api/xiaohulu/level').then(res => {
                this.levels = _.keyBy(res.data, 'id');
                this.filter.levels = _.map(res.data, 'id');
            });
            this.$http.get('/api/platform').then(res => {
                this.platforms = _.keyBy(res.data, 'id');
                this.filter.platforms = _.map(res.data, 'id');
            });
        }
    }
</script>

<style scoped>

</style>